<script setup lang="ts">
import { ECharts } from "echarts";
import { onMounted, reactive, ref } from "vue";
import ChartComponent from "../../../components/Chart/ChartComponent/ChartComponent.vue";
import { Config, EventBus, Store, Echarts, Service } from "../../../main";
const chartOption2 = ref<any>({});
const chartOption3 = ref<any>({});
const createPieOption = (data: Array<{ value: number; name: string }>) => {
  return {
    legend: {
      top: "bottom",
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [30, 100],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 3,
        },
        data: data,
      },
    ],
  };
};

onMounted(() => {
  Service.Shop.staticProductCategory().then(res => {
    console.log("staticProductCategory", res);
    let data = [];
    for (const key in res) {
      data.push({ name: key, value: res[key] });
    }
    chartOption2.value = createPieOption(data);
  });
  Service.Shop.staticProductSingleItem().then(res => {
    console.log("staticProductSingleItem", res);
    let data = [];
    for (const key in res) {
      data.push({ name: key, value: res[key] });
    }
    chartOption3.value = createPieOption(data);
  });
  setInterval(() => {
    Service.Shop.staticProductCategory().then(res => {
      console.log("staticProductCategory", res);
      let data = [];
      for (const key in res) {
        data.push({ name: key, value: res[key] });
      }
      chartOption2.value = createPieOption(data);
    });
    Service.Shop.staticProductSingleItem().then(res => {
      console.log("staticProductSingleItem", res);
      let data = [];
      for (const key in res) {
        data.push({ name: key, value: res[key] });
      }
      chartOption3.value = createPieOption(data);
    });
  }, 10000);
});
</script>

<template>
  <div class="box">
    <ChartComponent width="40%" height="50vh" :option="chartOption2"></ChartComponent>
    <ChartComponent width="40%" height="50vh" :option="chartOption3"></ChartComponent>
  </div>
</template>
<style scoped>
.box {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: transparent;
}
</style>
